<template>
	<view class="bg">
		<view class="bann">
            <view class="bann-tit">当前余额</view>
            <view class="bann-price">{{shop.balance}}</view>
            <view class="bann-but" @click="href('/merchant/shop/withdraw')">充值明细</view>
        </view>
        <view style="width: 100%;height: 20rpx;background-color: #eee;margin-top: 30rpx;"></view>
        <view>
            <view style="font-size: 36rpx;padding-top: 30rpx;padding-left: 40rpx;color: #000;">
                充值套餐
            </view>
            <view style="display: flex;flex-wrap: wrap;">
               
                <view class="tc" :class="price==500?'ass':''"  @click="price=500">
                    <view style="font-size: 36rpx;margin: 14rpx 0;color: #000;">500元</view>
                    <view style="color: #666;font-size: 24rpx;">可送100次AI使用</view>
                </view>
                <view class="tc" :class="price==1000?'ass':''" @click="price=1000">
                    <view style="font-size: 36rpx;margin: 14rpx 0;color: #000;">1000元</view>
                    <view style="color: #666;font-size: 24rpx;">可送200次AI使用</view>
                </view>
                <view class="tc" :class="price==2000?'ass':''" @click="price=2000">
                    <view style="font-size: 36rpx;margin: 14rpx 0;color: #000;">2000元</view>
                    <view style="color: #666;font-size: 24rpx;">可送400次AI使用</view>
                </view>
                <view class="tc" :class="price==5000?'ass':''" @click="price=5000">
                    <view style="font-size: 36rpx;margin: 14rpx 0;color: #000;">5000元</view>
                    <view style="color: #666;font-size: 24rpx;">可送1000次AI使用</view>
                </view>
                <view class="tc " :class="price==10000?'ass':''" @click="price=10000">
                    <view style="font-size: 36rpx;margin: 14rpx 0;color: #000;">10000元</view>
                    <view style="color: #666;font-size: 24rpx;">可送2000次AI使用</view>
                </view>
                <view class="tc" style="line-height: 125rpx;font-size: 34rpx;" @click="isTextPopup=true">
                    自定义
                </view>
            </view>
        </view>
        <view class="attention">
            <view >注意事项</view>
            <view >1.仅限通过微信充值</view>
            <view >2.充值可送相对应AI使用次数(每充值5元送1次AI次数)</view>
            <view >3.发起任务后，系统会冻结对应的余额，等待任务实际完成后，系统会做最终结算</view>
        </view>
        <view class="rech" @click="queding(1)">立即充值</view>
        <view class="textPopup" v-if="isTextPopup">
			<view class="textPopup_box">
				<view class="textPopup_box_title">
                    请输入充值金额
				</view>
				<view class="textPopup_box_input">
					<input  v-model="freight" :focus="focus" type="number">
				</view>
				<view class="textPopup_box_btn">
					<view class="textPopup_box_btn_box" @click="isTextPopup = false">取消</view>
					<view class="textPopup_box_btn_box" @click="queding(2)">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus:true,
				isTextPopup:false,
                shop:[],
                price:500,
                freight:'',
                order_id:0,
                code:''
			}
		},
		onLoad(e) {
            if(e.id){
                this.order_id = e.id;

                
            }
			this.userInfo = uni.getStorageSync('userInfo');
		},
		onShow() {
            this.getShop();
            // #ifdef MP-WEIXIN
			this.up_code();
			// #endif
		},
		methods: {
            up_code(){
                var that = this;
                uni.login({
                    provider: 'weixin', 
                    success: function (res) {
                        that.code = res.code;
                    }
                });
            },
            queding(type){
                var that = this;
              
                if(type == 2){
                    var price = this.freight;
                }else{
                    var price = this.price;
                }
                if(price < 100){
                    that.$Toast('单次充值金额不可低于100元');
                    return false;
                }
                if(that.order_id){
                    that.prepay(that.order_id,that.code,price);
                }else{
                    uni.request({
                        url: 'https://shop.yuxiang123.cn/api/pay/create_shop_order',
                        header: {"content-type": "application/x-www-form-urlencoded"},
                        method: 'POST',
                        data:{
                            token:uni.getStorageSync('token'),
                            shop_id:that.shop.id,
                            price:price,
                        },
                        success: (reset) => {
                            if(reset.data.code == 1){
                                that.order_id=reset.data.data.id;
                                that.prepay(reset.data.data.id,that.code,price);
                            }else{
                                that.$Toast(reset.data.msg);
                            }
                        }
                    })
                }
                
            },
            getShop(){
                var that = this;
                uni.request({
                    url: 'https://oa.yuxiang123.cn/api/shop/getShop',
                    header: {"content-type": "application/x-www-form-urlencoded"},
                    method: 'POST',
                    data:{
                        token:uni.getStorageSync('token')
                    },
                    success: (reset) => {
                        if(reset.data.code == 1){
                            that.shop=reset.data.data;
                        }else{
                            that.$Toast(reset.data.msg);
                        }
                    }
                })
            },
            prepay(order_id,code,price){
				this.isTextPopup = false;
				var that = this;
				var data = {
					token:uni.getStorageSync('token'),
					code:code,
					order_id:order_id,
					price:price,
					payment: 'wechat',
					shop_id:that.userInfo.shop_id
				};
				// #ifdef APP-PLUS
				var data = {
					token:uni.getStorageSync('token'),
					code:code,
					order_id:order_id,
					price:price,
					payment: 'wechat',
					platform: 'App',
					shop_id:that.userInfo.shop_id
				};
				// #endif
				uni.request({
					url: 'https://shop.yuxiang123.cn/api/pay/shop_prepay',
					header: {"content-type": "application/x-www-form-urlencoded"},
					method: 'POST',
					data:data,
					success: (res) => {
                        if(res.data.code == 0){
                            this.$Toast(res.data.msg);
                            if(res.data.msg == '订单支付金额错误'){
                                setTimeout(function () {
                                    uni.switchTab({
                                        url:'/pages/order/orderList'
                                    });
                                }, 800);
                            }
                            return false;
                        }
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',    //支付类型-固定值
							timeStamp: res.data.data.pay_data.timeStamp, // 时间戳（单位：秒）
							nonceStr: res.data.data.pay_data.nonceStr, // 随机字符串
							package: res.data.data.pay_data.package, // 固定值
							signType: res.data.data.pay_data.signType, //固定值
							paySign: res.data.data.pay_data.paySign, //签名
							success: function (res) {
								that.setMessage(res,1);
							},
							fail: function (err) {
								that.setMessage(err,2);
							}
						});
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'wxpay',    //支付类型-固定值
							orderInfo: res.data.data.pay_data, //微信订单数据(官方说是string。实测为object)
							success: function (res) {
								that.setMessage(res,1);
							},
							fail: function (err) {
								that.setMessage(err,2);
							}
						});
						// #endif
					}
				})
			},
			setMessage(res,type){
				var that = this;
				uni.request({
					url:'https://oa.yuxiang123.cn/api/index/addLog',
					method:'POST',
					header:{"content-type":"application/x-www-form-urlencoded"},
					data:{'content':'支付完成','type':type,'res':res},
				})
                this.up_code();
				if(type == 1){
                    this.order_id = 0;
					this.$Toast('充值成功');
                    this.getShop();
				}else{
					this.$Toast('支付失败');
                    //跳转
                    uni.switchTab({
                        url:'/pages/order/orderList'
                    });
				}
				
			},
            href:function(url){
                if(url!=''){
                    uni.navigateTo({
                        url:url
                    });
                }
            },
		}
	}
</script>

<style lang="scss">
.textPopup{
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	background-color: rgba($color: #000000, $alpha: 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	.textPopup_box{
		background-color: #FFFFFF;
		width: 90%;
		border-radius: 20upx;
		padding: 20upx;
		.textPopup_box_title{
			padding: 20rpx;
			text-align: center;
			font-size: 36upx;
		}
		.textPopup_box_input{
			input{
				padding:20upx;
				font-size:32upx;
				background-color: #f0f0f0;
				border-radius: 6upx;
			}
		}
		.textPopup_box_btn{
			display: flex;
			align-items: center;
			.textPopup_box_btn_box{
				flex: 1;
				text-align: center;
				padding: 30upx 0;
				font-size:36upx;
			}
		}
	}
}
.rech{
    width: 90%;
    margin-left: 5%;
    height: 80rpx;
    background-color: #31D1C9;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    font-size: 36rpx;
    margin-top: 100rpx;
    border-radius: 15rpx;
}
.attention{
    background-color: #f8f8f8;
    margin-top: 100rpx;
    padding: 40rpx;
    color: #999;
    font-size: 26rpx;
    line-height: 45rpx;
}
.tc{
    text-align: center;
    width: 29%;
    height: 125rpx;
    border: 1rpx solid #555353;
    margin-left: 3%;
    border-radius: 10rpx;
    margin-top: 35rpx;
}
.ass{
    border: 1px solid #E91E63 !important
}
.bann-but{
    position: absolute;
    right: 75rpx;
    margin-top: -45rpx;
    background: #fff;
    width: 170rpx;
    color: #31D1C9;
    height: 55rpx;
    border-radius: 30rpx;
    text-align: center;
    line-height: 55rpx;
}
.bann-price{
    color: #fff;
    padding-left: 40rpx;
    padding-top: 40rpx;
    font-size: 44rpx;
}
.bann-tit{
    color: #fff;
    font-size: 36rpx;
    padding-top: 30rpx;
    padding-left: 40rpx;
}
.bann{
    width: 94%;
    height: 240rpx;
    margin-left: 3%;
    margin-top: 20rpx;
    border-radius: 20rpx;
    background-image: linear-gradient(to right, #31D1C9, #8DA9FF);
}




</style>
